<template>
  <div class="orderManagement-container">
    <vab-query-form>
      <vab-query-form-left-panel :span="12">
        <el-button icon="el-icon-delete" type="danger" @click="handleDelete" :disabled="multiple"></el-button>
      </vab-query-form-left-panel>
      <vab-query-form-right-panel :span="12">
        <el-form :inline="true" :model="queryForm" @submit.native.prevent>
          <el-form-item>
            <el-date-picker
              v-model="daterange"
              type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00', '23:59:59']"
              @change="changeDocDate"
              style="width: 300px"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" @click="queryData">查询</el-button>
          </el-form-item>
        </el-form>
      </vab-query-form-right-panel>
    </vab-query-form>
    <el-table
      class="table_list"
      ref="list"
      border
      v-loading="listLoading"
      :data="list"
      :element-loading-text="elementLoadingText"
      @selection-change="handleSelectionChange"
      style="width: 100%"
    >
      <el-table-column show-overflow-tooltip align="center" min-width="50" type="selection"></el-table-column>
      <el-table-column show-overflow-tooltip align="left" min-width="150" prop="businessKey" label="单据号">
        <template #default="{ row }">
          <el-link :underline="false" type="text" @click="handleDetail(row)">{{ row.businessKey }}</el-link>
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        align="center"
        min-width="100"
        prop="category"
        label="类型"
        :formatter="formatterCategory"
      ></el-table-column>
      <el-table-column show-overflow-tooltip align="center" min-width="100" prop="taskName" label="流程节点"></el-table-column>
      <el-table-column show-overflow-tooltip align="center" min-width="160" prop="startTime" label="开始时间"></el-table-column>
      <el-table-column show-overflow-tooltip align="center" min-width="160" prop="endTime" label="结束时间"></el-table-column>
      <!-- <el-table-column align="center" min-width="60" label="操作">
        <template #default="{ row }">
          <el-tooltip effect="dark" content="删除当前行" placement="top">
            <el-button icon="el-icon-delete" type="danger" size="mini" circle @click="handleDelete(row)"></el-button>
          </el-tooltip>
        </template>
      </el-table-column> -->
    </el-table>
    <el-pagination
      background
      :current-page="queryForm.pageNum"
      :page-size="queryForm.pageSize"
      :layout="layout"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    ></el-pagination>

    <detail ref="salesOrder"></detail>
  </div>
</template>

<script>
  import { getUserTaskHistory } from '@/api/workflow/task'
  import { getList } from '@/api/workflow/modelCategory'
  import Detail from './components/Detail'
  export default {
    name: 'TaskCopy',
    components: { Detail },
    data() {
      return {
        list: [],
        listLoading: true,
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        elementLoadingText: '正在加载...',
        queryForm: {
          pageNum: 1,
          pageSize: 10,
        },
        daterange: undefined,
        selection: undefined,
        categoryList: [],
        multiple: true,
      }
    },
    created() {
      this.getModelCategory()
      this.fetchData()
    },
    methods: {
      handleSelectionChange(selection) {
        this.multiple = selection.length == 0
      },
      changeDocDate(date) {
        if (date) {
          this.queryForm.startTime = this.$parseTime(date[0])
          this.queryForm.endTime = this.$parseTime(date[1])
        } else {
          this.queryForm.startTime = undefined
          this.queryForm.endTime = undefined
        }
      },
      handleDelete(row) {
        console.log(row)
      },
      handleDetail(row) {
        console.log(row.category)
        if (row.category == 'sal_order') {
          this.$refs['salesOrder'].showEdit(row)
        }
      },
      formatterCategory(row) {
        let categoetys = this.categoryList.filter((item) => item.categoryCode == row.category)
        if (categoetys && categoetys.length != 0) {
          return categoetys[0].categoryName
        }
        return row.category
      },
      async getModelCategory() {
        const { data } = await getList()
        this.categoryList = data
      },
      handleSizeChange(val) {
        this.queryForm.pageSize = val
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.queryForm.pageNum = val
        this.fetchData()
      },
      queryData() {
        this.queryForm.pageNum = 1
        this.fetchData()
      },
      async fetchData() {
        this.listLoading = true
        // const { data } = await getUserTaskHistory(this.queryForm)
        // this.list = data.list
        // this.total = data.total
        setTimeout(() => {
          this.listLoading = false
        }, 300)
      },
    },
  }
</script>
<style scoped>
  .table_list /deep/ .el-table__expanded-cell {
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
  }
  .table_list /deep/ .table_list_expand .el-table__header-wrapper th {
    background-color: #ffffff;
    padding: 2px 0;
    border: none;
  }
  .table_list /deep/ .table_list_expand .el-table__body-wrapper td {
    background-color: #ffffff;
    padding: 2px 0;
    border: none;
  }
</style>
